* {margin: 0; padding: 0; box-sizing: border-box;}

body {overflow-x: hidden;}
html {font-size: calc(100vw/10.8);}
img {display: block;}

.flex {display: -webkit-flex; display: flex;}
.flex-item {flex: 1;}
.center {text-align: center; justify-content: center;}
.between {justify-content: space-between;}

.pop-bg {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background-color: rgba(0,0,0,.5); display: none; justify-content: center; align-items: center;}
.pop-bg.show,.pop-bg-share.show {display: -webkit-flex; display: flex;}
.pop-bg-share {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; background-color: rgba(0,0,0,.5); display: none; justify-content: center; align-items: center;}

.pop-box-follow {width: 9rem; height: 11rem; background-color: #fff; border-radius: .2rem; padding-top: 2.3rem; display: none;}
.pop-box-follow p {text-align: center; font-size: .48rem; line-height: .9rem; color: #002469;}
.pop-box-follow p span {color: #e1091d;}
.pop-box-follow > img {width: 3.28rem; height: 3.28rem; margin: 1.35rem auto 0;}

.pop-rank-box {width: 8.67rem; height: calc(100vh - 2.5rem - 1.65rem); position: absolute; left: .96rem; bottom: 0; background-color: #fff; background-image: linear-gradient(rgba(255,255,255,.2), rgba(220,170,140,.2)); display: none;}
.pop-rank-box:before {content: ''; position: absolute; width: 9.65rem; height: 1.65rem; background-image: url("../images/rank_box_head.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: -1.65rem;}
.pop-rank-box .rank-title {position: absolute; width: 3.59rem; height: .86rem; top: -.93rem; left: 2.69rem;}
.pop-rank-box .rank-list-title {font-size: .36rem; color: #d8916b; text-align: center; margin-top: .27rem;}
.pop-rank-box .rank-list-title .rank-list-title-num {width: 1.35rem; margin-right: .27rem;}
.pop-rank-box .rank-list-title .rank-list-title-name {width: 4.72rem;}
.pop-rank-box .rank-list-title .rank-list-title-score {width: 1.44rem;}
.pop-rank-box .rank-list-content {margin-top: .25rem; overflow: auto; height: calc(100vh - 8.5rem);}
.pop-rank-box .rank-list-content-item {align-items: center; margin-bottom: .1rem;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-num {width: 1.35rem; margin-right: .27rem; text-align: center; font-size: .36rem; color: #ff4c4c;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-num > img {width: .52rem; height: .81rem; margin: 0 auto;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-info {border-bottom: rgba(0,0,0,.1) 1px solid; padding: .11rem 0; align-items: center;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-info .rank-list-content-item-info-user {align-items: center; width: 4.72rem;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-info .rank-list-content-item-info-user > img {width: .94rem; height: .94rem; border-radius: 50%; border: #dcaa8c .03rem solid; margin-right: .25rem;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-info .rank-list-content-item-info-user > h1 {color: #b9561a; font-size: .4rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.pop-rank-box .rank-list-content-item .rank-list-content-item-info .rank-list-content-item-score {width: 1.44rem; text-align: center; font-size: .4rem; color: #ff4c4c;}
.pop-rank-box .rank-list-content-item.my {background-color: #eaccba; height: 1.32rem; margin: 0 -.12rem; border-radius: .2rem;}
.pop-rank-box .rank-list-content-item.my .rank-list-content-item-num {margin-left: .12rem;}
.pop-rank-box .rank-list-content-item.my .rank-list-content-item-info {border-bottom: none;}
.pop-rank-box .rank-list-content-item.my .rank-list-content-item-info .rank-list-content-item-info-user > h1 {color: #002469;}
.pop-rank-box .rank-btn-box {justify-content: space-between; padding: 0 .8rem; margin-top: .53rem;}
.pop-rank-box .rank-btn-box .rule-btn {width: 2.08rem; height: .44rem; background-image: url("../images/rule_btn_blue.png"); background-size: 100%; background-repeat: no-repeat;}
.pop-rank-box .rank-btn-box .back-btn {width: 2rem; height: .44rem; background-image: url("../images/back_btn.png"); background-size: 100%; background-repeat: no-repeat;}

.pop-box {width: 9rem; background-color: #fff; border-radius: .2rem; padding-top: 1.1rem; position: relative; display: none;}
.pop-box p {text-align: center; font-size: .48rem; color: #002469;}
.pop-box p span {color: #ff4c4c;}
.pop-box .choose-box {margin: 1.5rem .5rem 0; justify-content: space-between;}
.pop-box .choose-box .choose-box-item {width: 3.8rem; height: 5rem; border-radius: .2rem; position: relative;}
.pop-box .choose-box .choose-box-item.chosen {background-color: #f1ddd1;}
.pop-box .choose-box .choose-box-item.chosen:before {content: ''; width: .6rem; height: .6rem; position: absolute; top: -.14rem; right: -.18rem; background-color: #c77848; border-radius: 50%; background-image: url("../images/icon_this.png"); background-size: .35rem .33rem; background-repeat: no-repeat; background-position: center center;}
.pop-box .choose-box .choose-box-item.male {background-image: url("../images/game_person_stand_male.png"); background-size: 3rem 3.6rem; background-repeat: no-repeat; background-position: center center;}
.pop-box .choose-box .choose-box-item.female {background-image: url("../images/game_person_stand_female.png"); background-size: 3rem 3.6rem; background-repeat: no-repeat; background-position: center center;}
.pop-box button {display: block; width: 3rem; height: .9rem; background-color: #002469; font-size: .48rem; color: #fff; line-height: .9rem; border-radius: .2rem; border: none;}
.pop-box button.choose-confirm {margin: 1.55rem auto .5rem;}

.pop-box .pop-close {position: absolute; width: .7rem; height: .7rem; top: -.32rem; right: -.32rem;}
.pop-box .pop-box-content {height: 50vh; overflow: auto; padding: 0 .7rem; margin: .5rem 0;}
.pop-box .pop-box-content p {text-align: left;}

.pop-box .game-tips-img {width: 7rem; margin: 0 auto;}
.pop-box .game-tips-gif {width: 6rem; margin: .7rem auto 0;}
.pop-box button.game-tips-confirm {margin: .75rem auto .54rem;}
.pop-box button.game-tips-confirm.no-mar {margin: 0;}

.pop-box#gameOver {padding-top: .43rem;}
.pop-box h1 {text-align: center; font-size: .72rem; color: #e1091d; margin-bottom: .82rem;}
.pop-box .pop-failed-img {margin: .5rem auto .7rem; width: 6.13rem;}
.pop-box .pop-redbag-box {justify-content: center; align-items: center;}
.pop-box .pop-redbag-box > img {width: 1.14rem; height: .99rem; margin-right: .16rem;}
.pop-box .pop-redbag-box > p {font-size: .4rem; line-height: .48rem;}
.pop-box .pop-redbag-box > p > span {color: #e1091d;}
.pop-box .pop-btn-box {padding: 0 .85rem; margin: .42rem 0 .5rem; justify-content: space-between;}
.pop-box .pop-btn-box button:last-child {background-color: #e1091d;}

.pop-box#choose1 .choose-box {margin-top: .44rem;}
.pop-box .pop-choose-redbag-box {justify-content: center; flex-direction: column; margin-top: .54rem;}
.pop-box .pop-choose-redbag-box p {font-size: .4rem; margin-bottom: .35rem;}
.pop-box .pop-choose-redbag-box .pop-choose-redbag {justify-content: center; align-items: center;}
.pop-box .pop-choose-redbag-box .pop-choose-redbag .pop-redbag {width: .56rem; height: .76rem; background-image: url("../images/redbag_icon.png"); background-size: 100%; background-repeat: no-repeat;}
.pop-box .pop-choose-redbag-box .pop-choose-redbag .pop-redbag.onthis {background-image: url("../images/redbag_icon_onthis.png"); background-size: 100%; background-repeat: no-repeat;}
.pop-box .pop-choose-redbag-box .pop-choose-redbag .pop-choose-redbag-people {margin: 0 1.15rem; align-items: center;}
.pop-box .pop-choose-redbag-box .pop-choose-redbag .pop-choose-redbag-people > img {width: .6rem; height: .59rem; margin-right: .05rem;}
.pop-box .pop-choose-redbag-box .pop-choose-redbag .pop-choose-redbag-people > p {font-size: .4rem; color: #002469; margin-bottom: 0;}

.pop-box#gameOverSuccess,.pop-box#gameOverBreak {padding-top: 0;}
.pop-box .success-title {width: 8.97rem; margin: 0 auto .44rem;}
.pop-box .pop-success-img {width: 7.34rem; height: 5.33rem; margin: -.32rem auto -.6rem;}
.pop-box#gameOverSuccess p {position: relative; z-index: 2;}

.pop-box .pop-rank {text-align: center; margin: .4rem 0 1.15rem; color: #e1091d; font-size: 1.85rem; line-height: 1.58rem;}

.pop-share-box {position: absolute; top: .08rem; right: .15rem; z-index: 999; align-items: flex-end; flex-direction: column;}
.pop-share-box > img {width: 5.94rem; height: 1.64rem; margin-bottom: .24rem;}
.pop-share-box > button {width: 1.8rem; height: .5rem; line-height: .5rem; border-radius: .5rem; border: #fff 1px solid; background-color: rgba(0,0,0,.5); color: #fff; font-size: .3rem;}

.page {height: 100vh; position: relative;}

.page.loading {background-image: linear-gradient(#335087, #002469); display: -webkit-flex; display: flex; align-items: center; justify-content: center;}
.page.loading:before {content: ''; position: absolute; width: 100%; height: 13.59rem; background-image: url("../images/loading_bg_head.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: 0;}
.page.loading:after {content: ''; position: absolute; width: 100%; height: 7.34rem; background-image: url("../images/loading_bg_bottom.png"); background-size: 100%; background-repeat: no-repeat; left: 0; bottom: 0;}
.page .logo {width: 2.95rem; height: .54rem; position: absolute; left: .43rem; top: .49rem; z-index: 9;}
.page .slogan {width: 9.21rem; height: 5.2rem; position: absolute; left: .94rem; top: 1.2rem;}
.page .loading-bg {position: absolute; left: 0; top: 5rem;}
.page .loading {width: 5.74rem; height: 7.18rem; position: absolute; top: 7.61rem; left: 2.53rem; z-index: 2;}
.page .loading1 {width: 6.42rem; height: 8.4rem; position: absolute; top: 6rem; left: 50%; margin-left: -3.21rem;}
.page .loading-box {position: absolute; bottom: 1.98rem; width: 100%; left: 0; align-items: center; flex-direction: column;}
.page .loading-box .loading-bar-box {width: 7.5rem; height: .3rem; border-radius: .3rem; border: #fff .02rem solid; overflow: hidden;}
.page .loading-box .loading-bar-box > em {display: block; width: 0%; height: .26rem; border-radius: .26rem; background-color: #fff;}
.page .loading-box > p {color: #fff; font-size: .48rem; margin-top: .4rem;}

.page.index {background-image: url("../images/index_bg.jpg"); background-size: 100%; background-repeat: no-repeat; background-color: #ce895f; display: none;}
.page .index-text {position: absolute; left: 0; top: 6.6rem;}
.page .index-game-start {position: absolute; width: 3.9rem; height: 8.11rem; left: 3.28rem; top: 8.68rem; z-index: 2;}
.page .index-game-start img:first-child {position: relative; z-index: 2;}
.page .index-game-start .game-cow-fire {position: absolute; width: 1.34rem; height: 2.4rem; left: 2rem; top: 5.2rem;}
.page .index-game-start .index-point-box {position: absolute; left: 65%; top: 4.15rem; z-index: 3;}
.page .index-game-start .index-point-box > img {width: 1.95rem; height: 1.43rem; position: relative; z-index: 2;}
.page .index-game-start .index-point-box > em {position: absolute; width: .48rem; height: .48rem; background-color: #fff; border-radius: 50%; top: -.24rem; left: -.24rem; -webkit-animation-duration: 3s; animation-duration: 3s;}
.page .index-game-start .index-point-box > em:nth-child(2) {-webkit-animation-delay: 1000ms; animation-delay: 1000ms;}
.page .index-game-start .index-point-box > em:nth-child(3) {-webkit-animation-delay: 2000ms; animation-delay: 2000ms;}
.page .index-game-start .index-point-box > em:nth-child(4) {-webkit-animation-delay: 3000ms; animation-delay: 3000ms;}
.page .index-bottom {position: absolute; width: 100%; height: 7.54rem; background-image: url("../images/index_bottom.png"); background-size: 100%; background-repeat: no-repeat; left: 0; bottom: 0;}
.page .index-bottom .index-bottom-btn-box {position: absolute; width: 100%; left: 0; bottom: .54rem; padding: 0 .7rem; justify-content: space-between;}
.page .index-bottom .index-bottom-btn-box .rule-btn {width: 2.91rem; height: .54rem; background-image: url("../images/rule_btn.png"); background-size: 100%; background-repeat: no-repeat;}
.page .index-bottom .index-bottom-btn-box .rank-btn {width: 2.42rem; height: .54rem; background-image: url("../images/rank_btn.png"); background-size: 100%; background-repeat: no-repeat;}

.page.game {overflow: hidden;}
.page .game-score-box {position: absolute; width: 4.29rem; height: .78rem; background-image: url("../images/game_score_box_bg.png"); background-size: 100%; background-repeat: no-repeat; text-align: center; font-size: .48rem; color: #fff; line-height: .78rem; z-index: 2; top: .65rem; right: .6rem;}
.page .game-score-history {position: absolute; width: 4.29rem; height: .78rem; line-height: .78rem; top: 1.68rem; text-align: center; font-size: .48rem; color: #fff; z-index: 2; right: .6rem;}
.page .game-background {height: 300vh; position: absolute; width: 100%; left: 0; bottom: 0; margin-bottom: -.4rem;}
.page .game-background.bgRoundInf {margin-bottom: 0;}
.page .game-background .game-background-sky {height: 200vh; display: -webkit-flex; display: flex; align-items: flex-end; flex-direction: column; overflow: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; margin-bottom: -.4rem;}
.page .game-background .game-background-sky > img {transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-backface-visibility: hidden; margin-bottom: -.1rem; height: 100vh; width: 100%;}
.page .game-background .game-background-sky > div {position: absolute; left: 0; top: 0;}
.page .game-background .game-background-sky .cloud {content: ''; display: block; width: 10.8rem; height: 100vh; background-image: url("../images/game_cloud_img.png"); background-size: 100%; background-repeat: no-repeat; background-position: left bottom; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.page .game-background .game-background-ground {height: 100vh; background-image: url("../images/game_bg.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: left bottom;}
.page .game-start-tips {position: absolute; width: 100%; left: 0; bottom: 6rem; display: none;}
.page .game-lose-tips {position: absolute; width: 100%; left: 0; bottom: 12rem; display: none;}
.page .meteor {position: absolute; width: 2.5rem; height: 2.48rem; background-image: url("../images/meteor_img.png"); background-size: 100%; background-repeat: no-repeat; opacity: 0;}
.page .meteor.fly {-webkit-animation: meteorFly 3s linear forwards; animation: meteorFly 3s linear forwards;}

.page .game-person {position: absolute; width: 3rem; height: 3.6rem; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); bottom: 1rem;}
.page .game-person.male {background-image: url("../images/game_person_stand_male.png"); background-size: 100%; background-repeat: no-repeat;}
.page .game-person.female {background-image: url("../images/game_person_stand_female.png"); background-size: 100%; background-repeat: no-repeat;}
.page .game-person.fly {width: 2.5rem; height: 4.5rem; bottom: 3rem; background-image: none; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.page .game-person .person-hit-box {width: 1rem; height: 2rem; position: relative; z-index: 3;}
.page .game-person.male .person-hit-box {left: .5rem;}
.page .game-person.fly.male:before {content: ''; position: absolute; width: .57rem; height: 1.01rem; background-image: url("../images/game_cow_img_fire.png"); background-size: 100%; background-repeat: no-repeat; left: 1.44rem; top: 3.44rem; -webkit-animation: pulse ease-in-out 1s infinite; animation: pulse ease-in-out 1s infinite; -webkit-transform-origin: .25rem .12rem; transform-origin: .25rem .12rem; z-index: 1;}
.page .game-person.fly.male:after {content: ''; position: absolute; width: 2.5rem; height: 4.5rem; background-image: url("../images/game_cow_img.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: 0; z-index: 2;}
.page .game-person.fly.female:before {content: ''; position: absolute; width: 2.5rem; height: 4.5rem; background-image: url("../images/game_cow_img_female_balloon.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: 0; -webkit-animation: pulse1 ease-in-out 1s infinite; animation: pulse1 ease-in-out 1s infinite; z-index: 1;}
.page .game-person.fly.female:after {content: ''; position: absolute; width: 2.5rem; height: 4.5rem; background-image: url("../images/game_cow_img_female.png"); background-size: 100%; background-repeat: no-repeat; left: 0; top: 0; z-index: 2;}
.page .game-person .game-person-shield {position: absolute; width: 5.51rem; height: 5.54rem; background-image: url("../images/game_person_shield.png"); background-size: 100%; background-repeat: no-repeat; z-index: 3; display: none;}
.page .game-person.shield .game-person-shield {display: block;}
.page .game-person.male .game-person-shield {left: -1.3rem; top: -.6rem;}
.page .game-person.female .game-person-shield {left: -1.4rem; top: -.1rem;}
.page .game-person.fly.male.fallDown:before,.page .game-person.fly.female.fallDown:before {-webkit-animation: fallDown linear 1s forwards; animation: fallDown linear 1s forwards;}
.page .game-person.male.bigFire:before {-webkit-animation: pulse2 ease-in-out .5s infinite; animation: pulse2 ease-in-out .5s infinite;}
.page .game-person.female.bigFire:before {-webkit-animation-duration: 500ms; animation-duration: 500ms;}

.page .game-item {position: absolute; left: 10%; top: -10vh;}
.page .game-item.boom {width: 1.75rem; height: 1.76rem; background-image: url("../images/game_item_boom.png"); background-size: 100%; background-repeat: no-repeat;}
.page .game-item.shield {width: 2.35rem; height: 2.36rem; background-image: url("../images/game_item_shield.png"); background-size: 100%; background-repeat: no-repeat;}
.page .game-item.up {width: 2.35rem; height: 2.36rem; background-image: url("../images/game_item_up.png"); background-size: 100%; background-repeat: no-repeat;}

.page.poster {background-image: url("../images/poster_repeat_bg.jpg"); background-size: 100%;}
.page .person-box.male {position: absolute; width: 3.15rem; height: 6.54rem; background-image: url("../images/poster_person_male_img.png"); background-size: 100%; background-repeat: no-repeat; top: 6.41rem; left: 3.49rem;}
.page .person-box.female {position: absolute; width: 4.03rem; height: 5.9rem; background-image: url("../images/poster_person_female_img.png"); background-size: 100%; background-repeat: no-repeat; top: 7.34rem; left: 3.25rem;}
.page .poster-bottom-box {position: absolute; left: 0; bottom: 0; width: 100%; height: 3.8rem; background-color: #f1ddd1;}
.page .poster-bottom-box .poster-bottom-box-user {align-items: center; padding: 0 .75rem; margin-top: -1rem;}
.page .poster-bottom-box .poster-bottom-box-user > img {width: 1.96rem; height: 1.96rem; border-radius: 50%; border: #dcaa8c .03rem solid; margin-right: .25rem;}
.page .poster-bottom-box .poster-bottom-box-user h1 {color: #fff; font-size: .48rem; margin-bottom: .3rem;}
.page .poster-bottom-box .poster-bottom-box-user p {color: #002469; font-size: .48rem; font-weight: bolder;}
.page .poster-bottom-box .poster-bottom-box-user p span {color: #e1091d; font-size: .72rem;}
.page .poster-bottom-box .poster-slogan {width: 4.06rem; height: 1.63rem; margin-left: .45rem;}
.page .poster-bottom-box .poster-qr-box {position: absolute; right: .36rem; bottom: .44rem; align-items: flex-end;}
.page .poster-bottom-box .poster-qr-box > img:first-child {width: 5.27rem; height: .92rem; margin-right: .14rem;}
.page .poster-bottom-box .poster-qr-box > img:last-child {width: 1.75rem; height: 1.75rem;}
.page .poster-bottom-box .poster-qr-box > div > p {margin-bottom: .18rem; color: #002469; font-size: .3rem; width: 3rem; white-space: nowrap;}
.page .poster-bottom-box .poster-qr-box > div > p > span {color: #e1091d;}
.page .poster-bottom-box .poster-qr-box > div > .challenge-btn {width: 3rem; height: .9rem; background-image: url("../images/challenge_btn.gif"); background-size: 100%; background-repeat: no-repeat;}
.page .poster-bottom-box .poster-qr-box > div > .challenge-btn.red {background-image: url("../images/challenge_btn1.gif"); background-size: 100%; background-repeat: no-repeat;}







